<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>


  <div id="app">
    <ul>
      <li v-for="(item , index)  in list" :key="item.id">
        <span>{{item.name}} : </span>
        <span>{{item.num}}个</span>
        <span @click="item.num++">增加</span>
      </li>
    </ul>
    <p>总数：{{totalCount()}} 个</p>
    <p>总数：{{totalCount()}} 个</p>
    <p>总数：{{totalCount()}} 个</p>

    -------------------------------------
    <!-- <p>总数：{{totalCount}} 个</p>
    <p>总数：{{totalCount}} 个</p>
    <p>总数：{{totalCount}} 个</p> -->
  </div>

  <script src="./js/vue2.6.12.js"></script>

  <script>
    // computed 计算属性
    // 基于现有数据 计算新数据
    // 依赖数据变化而触发 自动重新计算 得到缓存数据

    var app = new Vue({
      el:'#app',
      data:{
        num:666,
        list:[
          {
            id:1,
            name:'篮球',
            num:1
          },
          {
            id:2,
            name:'玩具',
            num:2
          },
          {
            id:3,
            name:'铅笔',
            num:5
          }
        ]
      },
      methods:{
        totalCount(){
          console.log("methods方法执行了");
          var total = this.list.reduce((sum , item) => sum + item.num , 0)

          return total
        }
      },
      computed:{
        // 虽然写成这个样子 , 但是 是属性!
        num(){
          // this 依然代表vue实例
        },
        // totalCount(){
        //   // reduce() 求和
        //   // this.list.reduce(function(sum , item){
        //   //   sum + item.num
        //   // })
        //   console.log('计算属性执行了');

        //   var total = this.list.reduce((sum , item) => sum + item.num , 0)

        //   return total
        // }
      }
    })

    

  </script>
</body>
</html>